<!doctype html>
<html lang="en">
	<head>
		 <meta charset="utf-8">
		<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="assets/css/bootstrap.css">
		<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
		<link rel="stylesheet" href="assets/css/docs.css">
		<script type="text/javascript" src="assets/js/jquery-1.8.0.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.js"></script>
	</head>

	<body>
		<!-- Navbar 
		================================================== -->
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a class="brand" href="../">Bootswatch</a>
					<div class="nav-collapse" id="main-menu">
						<ul class="nav" id="main-menu-left">
							<li class="dropdown" id="preview-menu"></li>
							<li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li>
							<li><a id="swatch-link" href="/#gallery">Gallery</a></li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
								<ul class="dropdown-menu" id="swatch-menu">
									<li><a href="/default">Default</a></li>
									<li class="divider"></li>
									<li><a href="/amelia">Amelia</a></li>
									<li><a href="/cerulean">Cerulean</a></li>
									<li><a href="/cyborg">Cyborg</a></li>
									<li><a href="/journal">Journal</a></li>
									<li><a href="/readable">Readable</a></li>
									<li><a href="/simplex">Simplex</a></li>
									<li><a href="/slate">Slate</a></li>
									<li><a href="/spacelab">Spacelab</a></li>
									<li><a href="/spruce">Spruce</a></li>
									<li><a href="/superhero">Superhero</a></li>
									<li><a href="/united">United</a></li>
								</ul>
							</li>
						</ul>
						<ul class="nav pull-right" id="main-menu-right">
							<li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="Showcase of Bootstrap sites &amp; apps" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'builtwithbootstrap\']);">Built With Bootstrap <i class="icon-share-alt icon-white"></i></a></li>
							<li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push([\'_trackEvent\', \'click\', \'outbound\', \'wrapbootstrap\']);">WrapBootstrap <i class="icon-share-alt icon-white"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		 </div>

	    <div class="container">

	    	<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>Simplex</h1>
  <p class="lead">A preview of changes in this swatch.</p>
  <div class="subnav">
    <ul class="nav nav-pills">
      <li><a href="#typography">Typography</a></li>
      <li><a href="#navbar">Navbar</a></li>
      <li><a href="#buttons">Buttons</a></li>
      <li><a href="#forms">Forms</a></li>
      <li><a href="#miscellaneous">Miscellaneous</a></li>
    </ul>
  </div>
</header>

<!-- Typography
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>Typography</h1>
  </div>

  <!-- Headings & Paragraph Copy -->
  <div class="row">

    <div class="span4">
      <div class="well">
        <h1>h1. Heading 1</h1>
        <h2>h2. Heading 2</h2>
        <h3>h3. Heading 3</h3>
        <h4>h4. Heading 4</h4>
        <h5>h5. Heading 5</h5>
        <h6>h6. Heading 6</h6>
      </div>
    </div>

    <div class="span4">
      <h3>Example body text</h3>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
    </div>

    <div class="span4">
      <h3>Example addresses</h3>
      <address>
        <strong>Twitter, Inc.</strong><br>
        795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
      </address>
      <address>
        <strong>Full Name</strong><br>
        <a href="mailto:#">first.last@gmail.com</a>
      </address>
    </div>

  </div>

</section>

			<section id="navbar">
				<div class="page-header">
					<h1>Navbar</h1>
				</div>
				<div class="navbar">
					<div class="navbar-inner">
						<div class="container" style="width: auto;">
							<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							</a>
							<a class="brand" href="#">Project name</a>
							<div class="nav-collapse">
								<ul class="nav">
									<li class="active"><a href="#">Home</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li><a href="#">Link</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
										<ul class="dropdown-menu">
											<li><a href="#">Action</a></li>
											<li><a href="#">Another action</a></li>
											<li><a href="#">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#">Separated link</a></li>
										</ul>
									</li>
								</ul>
								<form class="navbar-search pull-left" action="">
									<input type="text" class="search-query span2" placeholder="Search">
								</form>
								<ul class="nav pull-right">
									<li><a href="#">Link</a></li>
									<li class="divider-vertical"></li>
									<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
									<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
									</ul>
									</li>
								</ul>
							</div><!-- /.nav-collapse -->
						</div>
					</div><!-- /navbar-inner -->
				</div><!-- /navbar -->

				</section>

			<section>
				<div class="row">
					<div class="span4" style="height:100px">1</div>
					<div class="span4">2</div>
					<div class="span4">3</div>
					<div class="span4">1</div>
					<div class="span4">2</div>
					<div class="span4">3</div>
				</div>

			</section>
			<section>
				<div class="row">
					<div class="span4" style="height:100px">1</div>
					<div class="span4">2</div>
					<div class="span4">3</div>
					<div class="span4">1</div>
					<div class="span4">2</div>
					<div class="span4">3</div>
				</div>

			</section>
		</div>
	<script type="text/javascript">
		!function(){
			var $win = $(window)
				, $nav = $('.subnav')
				, navHeight = $('.navbar').first().height()
				, navTop = $('.subnav').length && $('.subnav').offset().top - navHeight
				, isFixed = 0

			processScroll()

			$win.on('scroll', processScroll)

			function processScroll() {
				var i, scrollTop = $win.scrollTop()
				if (scrollTop >= navTop && !isFixed) {
					isFixed = 1
					$nav.addClass('subnav-fixed')
				} else if (scrollTop <= navTop && isFixed) {
					isFixed = 0
					$nav.removeClass('subnav-fixed')
				}
			}
			$('a[rel=tooltip]').tooltip({
				'placement': 'bottom'
			});
		}(window.jQuery)
	</script>
	</body>
</html>